<template>
    <div class='fxn-body'>
        <div class="fxn-tabs fxn-margin-b-20">
            <el-radio-group v-model="activeName" size="large" @change="handleTabs">
                <el-radio-button v-for="(item,index) in TabData" :key="index" :value="item.value">{{item.label}}</el-radio-button>
            </el-radio-group>
        </div>
        <!-- Tabs End -->
        <Searchs v-model:searchData="searchData" v-model:SearchForm="SearchForm" @handleSearch="handleSearch"></Searchs>
        <!-- Search End -->
        <div class="fxn-section fixed fxn-margin-t-20">
            <el-table v-loading="loading" :data="listData">
                <el-table-column label="案件名称" prop="title">
                    <template #default="scope">
                        <el-link type="primary" :underline="false" @click="handlePath(scope.row)">{{scope.row.title}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column label="发票类型" prop="type">
                    <template #default="scope">
                        {{scope.row.type == 1 ? '电子普通' : '电子专票'}}
                    </template>
                </el-table-column>
                <el-table-column label="申请人" prop="create_with" />
                <el-table-column label="申请时间" prop="create_time">
                    <template #default="scope">
                        {{$filter.dateTime(scope.row.create_time,1)}}
                    </template>
                </el-table-column>
                <el-table-column label="发票金额" prop="invoice_money" />
                <el-table-column label="到账状态" prop="coll_status">
                    <template #default="scope">
                        <span :style="{color: $filter.collStatusColor(scope.row.coll_status)}">{{$filter.collStatus(scope.row.coll_status)}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="审批状态" prop="status">
                    <template #default="scope">
                        {{$filter.appStatus(scope.row.status)}}
                    </template>
                </el-table-column>
                <el-table-column label="审批时间" prop="confirm_time">
                    <template #default="scope">
                        {{$filter.dateTime(scope.row.confirm_time,1)}}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-link type="primary" :underline="false" @click="handleDetail(scope.row)">详情</el-link>
                        <el-link v-if="scope.row.status == 1 && authMenu('sys_finance_approval_adopt')" type="primary" :underline="false" @click="handleApproval(2,scope.row)">通过</el-link>
                        <el-link v-if="scope.row.status == 1 && authMenu('sys_finance_approval_refuse')" type="primary" :underline="false" @click="handleApproval(3,scope.row)">拒绝</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- Section End -->

        <div class="fxn-page fixed">
            <el-pagination v-model:current-page="page" v-model:page-size="perPage" :page-sizes="[10, 50, 100, 200, 500]" layout="total, sizes, prev, pager, next" :total="count" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
        <!-- Page End -->

        <!-- 审批操作 -->
        <Approval v-model:appDialog="appDialog" :appData="appData" @handleSubmit="handleSubmit"></Approval>
        <!-- 审批操作 End -->

        <!-- 详情 -->
        <el-dialog title="详情" v-model="detailDialog" width="800">
            <el-descriptions :column="2" border>
                <el-descriptions-item label="发票类型">{{detailData.type == 1 ? '电子普通' : '电子专票'}}</el-descriptions-item>
                <el-descriptions-item label="抬头类型">{{detailData.name_type == 1 ? '个人发票' : '企业发票'}}</el-descriptions-item>
                <el-descriptions-item label="发票金额">{{detailData.invoice_money}}</el-descriptions-item>
                <el-descriptions-item label="发票抬头">{{detailData.invoice_name}}</el-descriptions-item>
                <el-descriptions-item v-if="detailData.name_type == 2" label="纳税人识别号">{{detailData.id_number}}</el-descriptions-item>
                <el-descriptions-item v-if="detailData.type == 2 && detailData.name_type == 2" label="电话">{{detailData.phone}}</el-descriptions-item>
                <el-descriptions-item v-if="detailData.type == 2 && detailData.name_type == 2" label="地址">{{detailData.address}}</el-descriptions-item>
                <el-descriptions-item v-if="detailData.type == 2 && detailData.name_type == 2" label="开户行">{{detailData.bank_name}}</el-descriptions-item>
                <el-descriptions-item v-if="detailData.type == 2 && detailData.name_type == 2" label="开户账号">{{detailData.bank_no}}</el-descriptions-item>
            </el-descriptions>
        </el-dialog>
        <!-- 详情 -->
    </div>
</template>

<script>
    import Searchs from '../Common/Search.vue'
    import UpFiles from '../Common/UpFiles.vue'
    import Approval from './Common/Approval.vue'
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, computed } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    export default defineComponent({
        components: {Searchs,UpFiles,Approval},
        setup() {
            const { proxy } = getCurrentInstance();
            const router = useRouter();
            const store = useStore();

            //初始化数据
            const state = reactive({
                count: 0,
                page: 0,
                perPage: 10,
                loading: false,
                btnLoading: false,
                listData: [],

                //Tabs
                activeName: 99,
                TabData: [
                    {value: 99, label: '全部'},
                    {value: 1, label: '待审批'},
                    {value: 2, label: '审批通过'},
                    {value: 3, label: '审批拒绝'},
                ],

                //搜索
                SearchForm: {
                    title: '',
                    create_with: '',
                    create_time: '',
                },
                searchData: [
                    {label: '案件名称', prop: 'title', type: 'input'},
                    {label: '申请人', prop: 'create_with', type: 'input'},
                    {label: '申请时间', prop: 'create_time', type: 'daterange'},
                ],

                //审批操作
                appDialog: false,
                appData: {
                    title: '审批通过',
                },

                //详情
                detailDialog: false,
                detailData: {},
            })

            //Tab
            const handleTabs = () => {
                getList(state.page,state.perPage);
            }

            //列表
            const getList = (page,perPage) => {
                state.loading = true;
                proxy.$http.get('/oa/Lawcase/financeInvoice',{
                    page: page ? page : 1,
                    perPage: perPage ? perPage : 10,
                    status: state.activeName == 99 ? '' : state.activeName,
                    title: state.SearchForm.title,
                    create_with: state.SearchForm.create_with,
                    create_time: String(state.SearchForm.create_time),
                })
                .then(res=> {
                    state.loading = false;
                    const { code, msg ,data } = res;
                    if(code != 1){
                        return proxy.$msg.error(msg);
                    }else{
                        state.count = data.count;
                        state.page = data.page;
                        state.perPage = data.perPage;
                        state.listData = data.list;
                    }
                })
            }

            //审批操作
            const handleApproval = (type,row) => {
                if(type == 2) {
                    state.appData.type = 1,
                    state.appData.id = row.id;
                    state.appDialog = true;
                }else{
                    proxy.$confirm("此操作会将该记录进行拒绝审批, 是否继续?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                    .then(async () => {
                        proxy.$http.post('/oa/Lawcase/opInvoice',{id: row.id,status: 3})
                        .then(res=> {
                            let { code, msg, data } = res;
                            if(code != 1){
                                return proxy.$msg.error(msg);
                            }else{
                                proxy.$msg.success('提交成功!');
                                getList(state.page,state.perPage);
                            }
                        })
                    })
                    .catch(() => {})
                }
            }

            //提交审批
            const handleSubmit = () => {
                getList(state.page,state.perPage);
            }

            //打开详情
            const handleDetail = (row) => {
                proxy.$http.get('/oa/Lawcase/financeInvoiceForm',{id: row.id})
                .then(res=> {
                    let { code, msg, data } = res;
                    if(code != 1){
                        return proxy.$msg.error(msg);
                    }else{
                        state.detailData = data;
                        state.detailDialog = true;
                    }
                })
            }

            //跳转详情
            const handlePath = (row) => {
                router.push({path: '/CaseDetail', query: {id: row.lawcase_id, type: row.case_type, pathUrl: '/InvoiceApproval'}})
            }

            //搜索
            const handleSearch = (e) => {
                state.SearchForm = e;
                getList(1,10);
            }

            //分页
            const handleSizeChange = (val) => {
                state.perPage = val;
                getList(state.page,state.perPage);
            }

            //页码
            const handleCurrentChange = (val) => {
                state.page = val;
                getList(state.page,state.perPage);
            }

            //获取权限
            const authMenu = (value) => {
                let currentRouter = router.currentRoute.value.path;
                let menuArr = (proxy.$public.authMenu(currentRouter).split(','));
                for (let index = 0; index < menuArr.length; index++) {
                    if(value == menuArr[index]){
                        return true
                    }
                }
            }
            
            //Dom加载
            onMounted(()=>{
                authMenu();
                getList();
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                handleTabs,
                getList,
                handleApproval,
                handleSubmit,
                handleDetail,
                handlePath,
                
                //组件方法
                authMenu,
                handleSearch,
                handleSizeChange,
                handleCurrentChange,
            }

        },
    })
</script>

<style scoped>
    
</style>